<template>
  <a-row class="right-head">
    <a-row :span="6">
      <a-avatar image-url="/src/assets/ikun.png" :size="50">
        <!-- <a-image src=""></a-image> -->
      </a-avatar>
      <div style="margin-left: 10px">
        <p>{{ info.name }}</p>
        <p>{{ info.pidName ? info.pidName : '暂无' }}</p>
      </div>
    </a-row>
    <a-row :span="6">
      <div>
        <a-button type="primary" @click="type = !type"
          >{{ type ? '上' : '下' }}线</a-button
        >
        <p>状态：{{ type ? '未上线' : '上线' }}</p>
      </div>
    </a-row>
  </a-row>
  <a-row class="right-main">
    <p style="margin-bottom: 20px">快速报工</p>
    <a-form :model="form" layout="vertical" auto-label-width>
      <a-form-item field="name">
        <template #label> <icon-command />良品数</template>
        <a-input-number :min="1" v-model="form.goodProductNumber" />
      </a-form-item>
      <a-form-item field="post">
        <template #label><icon-idcard /> 不良品数</template>
        <a-input-number :min="1" v-model="form.badProductNumber" />
      </a-form-item>
      <!-- <a-form-item field="post">
        <template #label><icon-layers />  不良品项</template>
        <a-input />
      </a-form-item> -->
      <a-form-item>
        <template #label><icon-save />备注信息 </template>
        <a-textarea v-model="form.remark" allow-clear />
      </a-form-item>
      <!-- <a-form-item field="name">
        <template #label> <icon-clock-circle />报工时长 </template>
        <div style="display: flex; align-items: center">
          <a-input-number :min="1" v-model="form.h" style="flex: 1" :min="1" />
          小时
          <a-input-number :min="1" v-model="form.m" style="flex: 1" :min="1" />
          分钟
        </div>
      </a-form-item> -->
    </a-form>
    <div style="display: flex; width: 100%; justify-content: space-between">
      <a-button @click="esc" style="width: 100px">取消</a-button>
      <a-button @click="del" style="flex: 1; margin: 0 10px" type="outline">
        撤销报工
      </a-button>
      <a-button @click="add" style="flex: 1" type="primary">提交报工</a-button>
    </div>
  </a-row>
</template>

<script setup lang="ts">
  import {
    PostReportWorks,
    DelEReportWorks,
  } from '@/api/produce-management/produce-list/index';
  import { reactive, ref, onMounted, computed, watch } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { cloneDeep, forIn } from 'lodash';

  const props = withDefaults(
    // 参数说明
    defineProps<{
      dispatchingId: number;
      delId: number;
      sum: number;
      taskId: number;
      processGroupId?: number;
    }>(),
    {}
  );
  const dispatchingId = ref();
  watch(
    () => props.dispatchingId,
    (val) => {
      dispatchingId.value = val;
    }
  );
  const emit = defineEmits(['update']);
  const type = ref(false);
  const info = reactive(
    JSON.parse(sessionStorage.getItem('loginInfo') as string)
  );
  const form: any = reactive({});
  const init = () => {
    for (const key in form) {
      form[key] = null;
    }
  };
  const add = async () => {
    try {
      if (!dispatchingId.value) {
        return Message.error('请选择报工数据');
      }
      const { goodProductNumber, badProductNumber, remark, h, m } = form;
      // && !h && !m
      if (!goodProductNumber && !badProductNumber && !remark) {
        return Message.error('请填完数据');
      }
      if (props.sum < goodProductNumber + badProductNumber) {
        return Message.error('报工数量大于派工数量');
      }
      const data: any = {
        dispatchingId: dispatchingId.value,
        operatorId: info.id,
        goodProductNumber,
        badProductNumber,
        remark,
        // reportWorkTime: h * 60 + m,
        taskId: props.taskId,
        processGroupId: props.processGroupId,
      };
      await PostReportWorks(data);
      emit('update');
      Message.info('新增派工成功');
      init();
    } catch (error) {
      init();
      console.log(error);
      // Message.error(`${error}`);
    }
  };

  const esc = () => {
    init();
  };
  const del = async () => {
    if (props.delId) {
      await DelEReportWorks({ id: props.delId });
      emit('update');
      Message.info('删除成功');
    } else {
      Message.error('未选择派工数据或无报工数据');
    }
  };
</script>

<style lang="less" scoped>
  p {
    margin: 0;
    padding: 0;
  }
  .right-head {
    padding: 20px;
    background-color: #3d7eff;
    color: #fff;
    justify-content: space-between;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .right-main {
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
  }
</style>
